<template>
    <BaseEcharts :chatsOption="chatsOption"></BaseEcharts>
</template>

<script>
    import BaseEcharts from "../../../components/common/Cahrts/coreEcharts"

    export default {
        components: {
            BaseEcharts
        },
        data() {
            let color = ["#FBDD60", "#FD6E77", "#57D9FA", "#05C192", "#FC8B44", "#8B48E4", "#DA7AFF", "#4992FF",];

            return {
                chatsOption: {
                    // tooltip: {
                    //     trigger: 'axis',
                    //     axisPointer: {
                    //         type: 'none'
                    //     },
                    //     formatter: function (params) {
                    //         return params[0].name + ': ' + params[0].value;
                    //     }
                    // },
                    color: ["#14B6C3"],

                    grid: {
                        top: "5%",
                        left: "1%",
                        right: "1%",
                        bottom: "12%",
                    },
                    tooltip: {
                        trigger: 'axis',
                        // formatter: '{a} <br/>{b} : {c} ({d}%)',
                        formatter: '{b0}{a0}: {c0}',
                        axisPointer: {
                            type: 'line',
                            label: {
                                backgroundColor: '#283b56'
                            }
                        },
                        textStyle: {
                            fontSize: 60,
                        },
                        padding: 20,
                        borderWidth: 4,
                        borderColor: "#48AFFF",
                        backgroundColor: "#010541",
                        extraCssText: "border-radius:20px;",

                    },
                    xAxis: {
                        data: ['驯鹿', '火箭', '飞机', '高铁', '轮船', '汽车', '跑步', '步行','汽车', '跑步', '步行','汽车'],
                        axisTick: {show: true},
                        axisLine: {show: false},
                        axisLabel: {
                            color: '#fff',
                            fontSize: 40,
                        }
                    },
                    yAxis: {
                        splitLine: {show: false},
                        axisTick: {show: false},
                        axisLine: {show: false},
                        axisLabel: {
                            show: false,
                            color: "#fff",
                            fontSize: 40,
                        }
                    },
                    series: [{
                        name: 'hill',
                        type: 'pictorialBar',
                        barCategoryGap: '95%',
                        // symbol: 'path://M0,10 L10,10 L5,0 L0,10 z',
                        symbol: 'path://M0,10 L10,10 C5.5,10 5.5,5 5,0 C4.5,5 4.5,10 0,10 z',
                        itemStyle: {
                            opacity: 1,
                            color: function (params) {
                                var colorList = [

                                    '#C1232B', '#B5C334', '#FCCE10', '#E87C25', '#27727B',

                                    '#FE8463', '#9BCA63', '#FAD860', '#F3A43B', '#60C0DD',

                                    '#D7504B', '#C6E579', '#F4E001', '#F0805A', '#26C0C0'

                                ];

                                return color[params.dataIndex]

                            },
                        },
                        label: {
                            show: true,
                            position: 'top',
                            formatter: '{c}',
                            fontSize: 20,
                            color: "#fff",

                        },
                        emphasis: {
                            itemStyle: {
                                opacity: 1
                            }
                        },
                        symbolRotate: 180,
                        data: [30, 60, 25, 18, 12, 49, 20, 41, 20, 41, 20, 41],

                        z: 10
                    },
                        {
                            name: 'hill',
                            type: 'line',
                            barCategoryGap: '90%',
                            itemStyle: {
                                opacity: 1,
                            },
                            label: {
                                show: false,
                                position: 'top',
                                formatter: '{c}',
                                fontSize: 20,
                                color: "#fff",

                            },
                            emphasis: {
                                itemStyle: {
                                    opacity: 1
                                }
                            },
                            symbolRotate: 180,
                            data: [30, 60, 25, 18, 12, 49, 20, 41, 20, 41, 20, 41],
                            z: 10
                        },
                    ]
                }
            }
        }

    }
</script>
